<template>
	<view class="paper">

		<Lock></Lock>

		<view class="header">
			<uni-icons type="left" size="3vw" color="#fff" @click="back"></uni-icons>
			<view class="paperTitle">{{paperTitle}}</view>
			<view class="catalogueButton" @click="showCatalogue=!showCatalogue">
				{{showCatalogue?"隐藏":"查看"}}目录
			</view>

			<view v-if="paperMode==1" class="submit_countDownTime_container">
				<view class="countDownTime">{{countDownTime}}</view>
				<view class="submit" @click="submit">交卷</view>
			</view>
			<view v-else class="recordScore">
				<template v-if="analysisStatus==1">
					总分：{{recordScore}}
				</template>
				<template v-else>
					客观题得分：{{recordScore}} （主观题待批阅）
				</template>
			</view>
		</view>

		<view v-if="activeQuestion" class="main">
			<view v-show="showCatalogue" class="questionTreeContainer">
				<view class="questionTree">
					<view v-for="(question,index) in questionList" class="questionItem"
						:class="{active:activeIndex==index}" @click="chooseQuestion(index)">
						{{question.batchTaskIndex}} {{question.questionText}}
					</view>
				</view>
			</view>

			<view :key="activeIndex" class="buttonAndQustionContainer">
				<!-- 任务序号与按钮列表 -->
				<view class="buttonContainer">
					<view class="batchTaskIndex">
						任务{{activeQuestion.batchTaskIndex}}
					</view>

					<template v-if="paperMode==2">
						<view v-if="activeRecord.isCorrect===true" class="isCorrect true">
							正确
						</view>
						<view v-if="activeRecord.isCorrect===false" class="isCorrect false">
							错误
						</view>
						<view v-if="activeRecord.isCorrect===null" class="isCorrect null">
							未批阅
						</view>
					</template>

					<view v-if="activeQuestion.batchInfo.stem" class="button" style="margin-left: 1vw;"
						@click="openStem">
						查看题干
					</view>

					<view style="margin-left: auto;display:flex;align-items: center;">
						<view v-if="activeIndex>0" class="button" @click="last">上一题</view>
						<view v-if="activeIndex+1<questionList.length" class="button" style="margin-left: 1vw;"
							@click="next">
							下一题</view>
						<view v-else style="margin-left: 1vw;">已经是最后一题</view>
					</view>

					<uni-popup ref="popup" type="center" style="margin-top: 99px;">
						<view class="stemPopupContainer">
							<view class="title-line">
								<view class="title">任务{{activeQuestion.batchInfo.index + 1}}题干</view>
								<uni-icons type="closeempty" size="1.8vw" color="#999" @click="closeStem"></uni-icons>
							</view>
							<view class="stemContainer">
								<view class="stem">{{activeQuestion.batchInfo.stem}}</view>
								<view class="stemResources">
									<image v-for="stemResource of activeQuestion.batchInfo.stemResources"
										class="stemResource" :src="stemResource.href" mode="aspectFit"
										@click="previewImage(stemResource.href)">
									</image>
								</view>
							</view>
						</view>
					</uni-popup>
				</view>


				<view class="questionContainer">

					<Question1 v-if="activeQuestion.type==1" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question1>

					<Question2 v-if="activeQuestion.type==2" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question2>

					<Question3 v-if="activeQuestion.type==3" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question3>

					<Question4 v-if="activeQuestion.type==4" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question4>

					<Question5 v-if="activeQuestion.type==5" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question5>

					<Question6 v-if="activeQuestion.type==6" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question6>

					<Question7 v-if="activeQuestion.type==7" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question7>

					<Question8 v-if="activeQuestion.type==8" :paperMode="paperMode" :activeQuestion="activeQuestion"
						:activeRecord="activeRecord" :initAnswer="activeAnswer" @updateAnswer="updateAnswer">
					</Question8>
				</view>


			</view>
		</view>
	</view>
</template>

<script>
	import Lock from "@/components/Lock";
	import Question1 from "./components/Question1.vue";
	import Question2 from "./components/Question2.vue";
	import Question3 from "./components/Question3.vue";
	import Question4 from "./components/Question4.vue";
	import Question5 from "./components/Question5.vue";
	import Question6 from "./components/Question6.vue";
	import Question7 from "./components/Question7.vue";
	import Question8 from "./components/Question8.vue";

	export default {
		components: {
			Lock,
			Question1,
			Question2,
			Question3,
			Question4,
			Question5,
			Question6,
			Question7,
			Question8,
		},
		data() {
			return {
				paperMode: 1, //1答题 2查看结果
				id: null, //试卷id
				paperTitle: "", //试卷标题
				questionList: [],
				activeIndex: -1, //当前题号
				userAnswerList: [], //[{taskPaperQuestionId,userAnswer,isEmpty}]


				showCatalogue: false, //展示侧边目录

				backInterceptFlag: true, //是否拦截返回操作

				//答题结果
				recordId: null,
				recordScore: null, //试卷得分
				analysisStatus: null, //试卷状态  0待批阅 1完成
				paperRecords: [],

				//直接提交
				forceSubmit: false,
				submitTime: "", //交卷时间
				countDownTimer: null,
				countDownTime: null,
			}
		},
		computed: {
			storageKey() {
				return `${this.$store.state.session.userId}_paper_${this.id}_userAnswerList`
			},
			activeQuestion() { //当前试题
				// type 1234567  单选 多选 判断 论述  图层叠加  因素描述 因素选择 下拉填空
				console.log("activeQuestion", this.questionList[this.activeIndex])
				return this.questionList[this.activeIndex]
			},
			activeAnswer() {
				return this.userAnswerList[this.activeIndex].userAnswer
			},
			activeRecord() {
				if (this.paperMode == 1) return null
				console.log("activeRecord", this.paperRecords[this.activeIndex])
				return this.paperRecords[this.activeIndex]
			},

		},
		watch: {
			activeIndex(newVal, oldVal) {
				let newQuestion = this.questionList[newVal];
				let oldQuestion = this.questionList[oldVal];

				if (this.paperMode == 1) {
					//第一次进入，或进入下一题
					if (!oldQuestion || (newQuestion.batchInfo.id != oldQuestion.batchInfo.id)) {
						//存在题干，则打开题干窗口
						if (newQuestion.batchInfo.stem || newQuestion.batchInfo.stemResources
							.length) {
							this.$nextTick(() => {
								this.openStem();
							})
						}
					}

					//答题模式下，每次换题时缓存答案
					this.setStorage();
				}
			}
		},
		onLoad(option) {
			this.id = option.id;
			if (option.recordId) {
				this.paperMode = 2;
				this.recordId = option.recordId;
			}
			if (option.forceSubmit) {
				this.forceSubmit = true;
			}
		},
		onBackPress(options) {
			console.log("onBackPress", options, this.paperMode, this.backInterceptFlag)
			if (this.paperMode == 1 && this.backInterceptFlag) { //需要拦截
				const emptyAnswerCount = this.userAnswerList.filter(item => item.isEmpty).length;
				console.log("emptyAnswerCount", emptyAnswerCount)
				//答案全为空（还没答题）则直接退出
				if (emptyAnswerCount == this.questionList.length) return false

				uni.showModal({
					title: '提示',
					content: "您尚未提交答题结果，是否退出？",
					cancelText: "直接退出",
					confirmText: "缓存结果并退出",
					success: (res) => {
						this.backInterceptFlag = false; //以下的 navigateBack 不再需要拦截
						if (res.confirm) {
							this.setStorage();
							uni.navigateBack();
						} else {
							this.removeStorage();
							uni.navigateBack();
						}
					}
				});
				return true //拦截
			}
			return false
		},
		mounted() {
			this.generateQuestionAndAnswerList().then(() => {
				if (this.paperMode == 1) {
					//检查缓存答案
					console.log("storage", this.$store.state.session)
					this.getStorageAnswer().then(() => {
						//最后再展示题目，防止Question组件过早渲染，样式不更新
						this.activeIndex = 0;
						if (this.forceSubmit) {
							this.submit();
						}
					});
				} else if (this.paperMode == 2) {
					this.axios.get("/api/services/app/Task/GetTaskPaperRecordById", {
						params: {
							id: this.recordId
						}
					}).then(res => {
						this.recordScore = res.recordScore;
						this.analysisStatus = res.analysisStatus;
						this.paperRecords = this.generateRecords(res.answers);
						this.activeIndex = 0;
					})
				}

			});


		},
		beforeDestroy() {
			clearInterval(this.countDownTimer)
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			openStem() {
				this.$refs.popup.open();
			},
			closeStem() {
				this.$refs.popup.close();
			},
			last() {
				if (this.activeIndex > 0) {
					this.activeIndex--; //返回上一小题
				}
			},
			next() {
				if (this.activeIndex + 1 < this.questionList.length) {
					this.activeIndex++; //进入下一小题
				}
			},
			chooseQuestion(questionIndex) {
				this.activeIndex = questionIndex;
			},
			setStorage() { //缓存当前答题情况
				//仅缓存非空答案
				const answerListToSave = this.userAnswerList.filter(item => !item.isEmpty);

				//所有题目都没回答则清理缓存
				if (answerListToSave.length == 0) {
					this.removeStorage();
				} else {
					uni.setStorageSync(this.storageKey, JSON.stringify(
						answerListToSave.map(item => {
							//isEmpty字段无需缓存
							return {
								taskPaperQuestionId: item.taskPaperQuestionId,
								userAnswer: item.userAnswer
							}
						})
					));
				}
			},
			removeStorage() {
				uni.removeStorageSync(this.storageKey);
			},
			checkEmptyAnswer(index) {
				let isEmpty;

				if (JSON.stringify(this.userAnswerList[index].userAnswer) === JSON.stringify(this.generateInitAnswer(this
						.questionList[index]))) {
					isEmpty = true
				} else {
					isEmpty = false
				}
				this.userAnswerList[index].isEmpty = isEmpty;
				// console.log("checkEmptyAnswer", isEmpty)
			},

			//检查答案格式，防止因题目变化导致答案数据格式异常产生的脏数据
			checkAnswerFormat(question, answer) {
				if (question.type == 1) {
					if (answer === null || typeof answer === 'string') return true
				} else if (question.type == 2) {
					if (answer instanceof Array) return true
				} else if (question.type == 3) { //"0" "1"
					if (answer === null || answer === '0' || answer === '1') return true
				} else if (question.type == 4) {
					// if (typeof answer === 'string') return true
					if (answer !==null && typeof answer.text === 'string') {
						return true
					}
				} else if (question.type == 5) {
					if (answer instanceof Array) return true
				}
				//默认值为长度同该题layerResources的空字符串数组["","",""]
				else if (question.type == 6) {
					if (answer instanceof Array && answer.length == question.layerResources.length && answer.every(item =>
							(typeof item === 'string'))) {
						return true
					}
				}
				//默认值为长度同该题choices的空数组数组[[],[],[]]
				else if (question.type == 7) {
					if (answer instanceof Array && answer.length == question.choices.length && answer.every(item => (
							item instanceof Array))) {
						return true
					}
				}
				//默认值为长度同该题__数量的null数组[null,null,null]
				else if (question.type == 8) {
					
					console.log("question",question)
					console.log("answer",answer)
					console.log(answer instanceof Array)
					console.log(answer.length == question.questionText.split(/(__)/g).filter(item =>
							item == "__").length)
							console.log(answer instanceof Array)
					if (answer instanceof Array && answer.length == question.questionText.split(/(__)/g).filter(item =>
							item == "__").length) {
						return true
					}
				}
				return false
			},
			generateInitAnswer(question) {
				let initAnswer;
				if (question.type == 1) {
					initAnswer = null
				} else if (question.type == 2) {
					initAnswer = []
				} else if (question.type == 3) { //"0" "1"
					initAnswer = null
				} else if (question.type == 4) {
					initAnswer = {
						text: "",
						imageList: [],
						videoList: []
					}
				} else if (question.type == 5) {
					initAnswer = []
				}
				//默认值为长度同该题layerResources的空字符串数组["","",""]
				else if (question.type == 6) {
					initAnswer = question.layerResources.map(item => "");
				}
				//默认值为长度同该题choices的空数组数组[[],[],[]]
				else if (question.type == 7) {
					initAnswer = question.choices.map(item => []);
				}
				//默认值为长度同该题__数量的null数组[null,null,null]
				else if (question.type == 8) {
					initAnswer = question.questionText.split(/(__)/g).filter(item => item == "__").map(item => null);
				}
				return initAnswer;
			},
			getStorageAnswer() {
				return new Promise(resolve => {
					const value = uni.getStorageSync(this.storageKey);
					if (value) {
						//有缓存
						// uni.showModal({
						// 	title: '提示',
						// 	content: "检查到您有缓存的答题记录，是否加载？",
						// 	cancelText: "取消",
						// 	confirmText: "确定",
						// 	success: (res) => {
						// if (res.confirm) {
						const storageUserAnswerList = JSON.parse(value);
						console.log(`检测到缓存 ${this.storageKey}`, storageUserAnswerList);

						this.questionList.forEach((question, index) => {
							const userAnswerItem = storageUserAnswerList.find(
								item =>
								item
								.taskPaperQuestionId ==
								question.id);
							// console.log("userAnswerItem", userAnswerItem)

							//若存在答案且答案格式正常则加入到答案列表
							if (
								userAnswerItem && this.checkAnswerFormat(question,
									userAnswerItem.userAnswer)
							) {
								this.userAnswerList[index].userAnswer =
									userAnswerItem
									.userAnswer;
								this.checkEmptyAnswer(index);
							}
						})

						console.log("userAnswerList", this.userAnswerList)
						// } else {
						// 	this.removeStorage();
						// }

						resolve();
						// 	}
						// });


					} else {
						console.log(`未检测到缓存 ${this.storageKey}`);
						resolve();
					}
				})
			},
			generateQuestionAndAnswerList() {
				return new Promise(resolve => {
					this.axios.get("/api/services/app/Task/GetTaskPaperDetail", {
						params: {
							taskPaperId: this.id
						}
					}).then(res => {
						this.paperTitle = res.paperTitle;
						this.submitTime = res.submitTime;
						if (this.submitTime) {
							clearInterval(this.countDownTimer)
							this.countDownTimer = setInterval(this.getCountDownTime, 1000);
						}

						res.taskBatchQuestions.forEach((batchItem, batchIndex) => {
							batchItem.taskQuestions.forEach((taskItem, taskIndex) => {
								let batchTaskIndex;
								if (batchItem.taskQuestions.length > 1) {
									batchTaskIndex = `${batchIndex+1}-${taskIndex+1}`
								} else {
									batchTaskIndex = `${batchIndex+1}`
								}
								//添加到题目列表
								this.questionList.push({
									batchTaskIndex,
									batchInfo: {
										id: batchItem.id,
										index: batchIndex,
										subIndex: taskIndex,
										stem: batchItem.stem,
										stemResources: batchItem.stemResources,
									},
									...taskItem,
									extension: taskItem.extension ? JSON.parse(
										taskItem.extension) : {},
									layerResources: taskItem.layerResources.map((
										layerItem, layerIndex) => {
										return {
											...layerItem,
											index: layerIndex
										}
									}),
									choices: taskItem.choices.map((choiceItem) => {
										return {
											...choiceItem,
											extension: choiceItem
												.extension ? JSON.parse(
													choiceItem.extension) :
												{}
										}
									})
								})

								this.userAnswerList.push({
									"taskPaperQuestionId": taskItem.id,
									"userAnswer": this.generateInitAnswer(
										taskItem),
									"isEmpty": true
								});

							})

						})
						console.log("questionList", this.questionList)
						console.log("userAnswerList", this.userAnswerList)
						resolve()
					})
				})
			},
			updateAnswer(e) {
				console.log("updateAnswer", e)
				this.userAnswerList[this.activeIndex].userAnswer = e;
				this.checkEmptyAnswer(this.activeIndex);
			},
			submit() {
				console.log("submit", this.userAnswerList);
				let content;
				let showCancel = true;
				if (this.forceSubmit) {
					content = `随堂测试《${this.paperTitle}》答题时间已结束，即将交卷`
					showCancel = false;
				} else {
					const emptyAnswerCount = this.userAnswerList.filter(item => item.isEmpty).length;
					if (emptyAnswerCount > 0) {
						content = `您有 ${emptyAnswerCount} 题没有填写答案，是否确认交卷？`;
					} else {
						content = '是否确认交卷'
					}
				}
				let userAnswers = this.userAnswerList.map((item, index) => {
					return {
						taskPaperQuestionId: item.taskPaperQuestionId,
						userAnswer: JSON.stringify((item.userAnswer))
					}
				})

				uni.showModal({
					title: '提示',
					content,
					showCancel,
					success: (res) => {
						if (res.confirm) {
							this.axios.post("/api/services/app/Task/TaskPaperAnalysis", {
								"taskPaperId": this.id,
								"userAnswers": userAnswers
							}).then(res => {
								this.removeStorage();
								this.analysisStatus = res.analysisStatus;
								this.recordScore = res.recordScore;
								this.paperRecords = this.generateRecords(res.answers);

								let modelContent = "";
								if (this.analysisStatus == 0) {
									modelContent =
										`《${this.paperTitle}》客观题得分为 ${this.recordScore}，主观题待批阅。`
								} else {
									modelContent = `《${this.paperTitle}》总分为 ${this.recordScore}`
								}
								uni.showModal({
									title: '提示',
									content: modelContent,
									cancelText: "退出",
									confirmText: "答题解析",
									success: (res) => {
										if (res.confirm) {
											this.paperMode = 2;
											this.activeIndex = 0;
										} else {
											this.backInterceptFlag = false;
											uni.navigateBack();
										}
									}
								});
							})

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			generateRecords(answers) {
				return this.questionList.map(question => {
					const recordItem = answers.find(item => item.taskQuestionId == question.id);
					//该题有对应答案
					if (recordItem) {
						console.log("recordItem", recordItem)
						//若标准答案格式正常则加入到答案列表,否则为null
						let answer;
						try {
							answer = JSON.parse(recordItem.answer);
						} catch (e) {
							console.error(e)
						}
						if (!this.checkAnswerFormat(question, answer)) {
							answer = null
						}


						//若存在用户回答格式正常则加入到答案列表,否则为null
						let userAnswer;
						try {
							userAnswer = JSON.parse(recordItem.userAnswer);
						} catch (e) {
							console.error(e)
						}
						if (!this.checkAnswerFormat(question, userAnswer)) {
							userAnswer = null
						}
						

						return {
							...recordItem,
							answer,
							userAnswer
						}
					}
					// 该题没有对应的答案
					else {
						//若标准答案格式正常则加入到答案列表,否则为null
						let answer;
						try {
							answer = JSON.parse(question.answer);
						} catch (e) {
							console.error(e)
						}
						if (!this.checkAnswerFormat(question, answer)) {
							answer = null
						}
						return {
							"taskQuestionId": question.id,
							"isCorrect": false,
							"userAnswer": null, //用户答案为空
							"answer": answer,
							"answerDetail": question.answerDetail,
							"score": 0
						}
					}

				})
			},
			getCountDownTime() {
				if (!this.submitTime) return null
				// "2024-04-02 10:00:34"
				const submitTimestamp = new Date(this.submitTime).getTime();
				const timestamp = new Date().getTime();

				const minutes = Math.max(0, parseInt((submitTimestamp - timestamp) / 1000 / 60));
				const seconds = Math.max(0, parseInt((submitTimestamp - timestamp) / 1000 - minutes * 60));

				this.countDownTime = `倒计时：${minutes}分${seconds}秒`

			}


		}
	}
</script>

<style lang="scss" scoped>
	$headerHeight: 6vw;
	$mainPaddingHorizontal: 1.2vw; //左右间距
	$mainPaddingVertical: 1.2vw; //上下间距
	$buttonContainerHeight: 3.2vw;

	.paper {
		background-color: #F1F6F9;
		width: 100vw;
		height: 100vh;
	}

	.header {
		width: 100vw;
		height: $headerHeight;
		background-color: #2380E9;
		display: flex;
		align-items: center;
		padding-left: 0.5vw;
		padding-right: 1.5vw;
		font-size: 1.8vw;
		color: #fff;
		box-sizing: border-box;

		.paperTitle {
			margin-left: 0.5vw;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			height: $headerHeight;
			line-height: $headerHeight;
			max-width: 50vw;
		}

		.catalogueButton {
			align-items: center;
			padding: 0 1vw;
			height: 2.5vw;
			line-height: 2.5vw;
			text-align: center;
			border-radius: 5vw;
			background-color: #fff;
			border: 0.1vw solid #ddd;
			color: #2380E9;
			font-size: 1.2vw;
			margin-left: 1vw;
		}

		.submit_countDownTime_container {
			margin-left: auto;
			display: flex;
			align-items: center;

			.countDownTime {
				margin-right: 2vw;
			}

			.submit {
				margin-left: auto;
				width: 10vw;
				height: 3.2vw;
				line-height: 3.2vw;
				text-align: center;
				border-radius: 5vw;
				background-color: #fff;
				border: 0.1vw solid #ddd;
				color: #2380E9;
				font-size: 1.6vw;
			}
		}

		.recordScore {
			margin-left: auto;
			font-size: 1.6vw;
		}
	}

	.main {
		display: flex;
		box-sizing: border-box;
		width: 100vw;
		padding-top: $mainPaddingVertical;
		padding-left: $mainPaddingHorizontal;
		padding-right: $mainPaddingHorizontal;

		.questionTreeContainer {
			width: 15vw;
			height: 100%;
			overflow: auto;
			height: calc(100vh - #{$headerHeight} - #{$mainPaddingVertical} - #{$mainPaddingVertical} - 0.1vw); //100vh - header - 自己的上下margin - 容错
			margin-right: $mainPaddingHorizontal;
			flex-shrink: 0;
			border-radius: 0.5vw;
			padding: 0.5vw 0;
			box-sizing: border-box;
			// background-color: #C8DCFF;
			background-color: #FFF;

			.questionTree {
				// height: 2000px;
				$treeItemHeight: 2.2vw;

				.questionItem {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					height: $treeItemHeight;
					line-height: $treeItemHeight;
					font-size: 1.2vw;
					padding-left: 0.5vw;

					&.active {
						box-sizing: border-box;
						border-left: 0.5vw solid #2380E9;
						padding-left: 0.5vw;
						// background-color: #C8DCFF;
						// background-color: #fff;
					}
				}
			}
		}

		.buttonAndQustionContainer {
			flex-grow: 1;

			.buttonContainer {
				display: flex;
				box-sizing: border-box;
				height: $buttonContainerHeight;
				align-items: center;

				.batchTaskIndex {
					font-size: 1.6vw;
				}

				.isCorrect {
					margin-left: 1vw;

					&.true {
						color: #18bc37;
					}

					&.false {
						color: #e43d33;
					}

					&.null {
						color: #8f939c;
					}
				}

				.button {
					width: 10vw;
					height: $buttonContainerHeight;
					line-height: $buttonContainerHeight;
					text-align: center;
					border-radius: 5vw;
					background-color: #fff;
					border: 0.1vw solid #ddd;
				}

				.stemPopupContainer {
					background-color: #fff;
					box-shadow: rgba(0, 0, 0, 0.24) 0px 0.1vw 0.3vw;
					border-radius: 0.8vw;
					box-sizing: border-box;
					padding: 2vw;
					width: 90vw;

					.title-line {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.title {
							font-size: 1.4vw;
							font-weight: bold;
						}
					}

					.stemContainer {
						margin-top: 1vw;
						line-height: 2vw;
						min-height: 20vh;
						max-height: 80vh;
						overflow: auto;

						.stem {}

						.stemResources {
							margin-top: 1vw;
							display: flex;
							flex-wrap: wrap;

							.stemResource {
								width: 30vw;
								height: 30vw;
							}
						}
					}
				}
			}

			.questionContainer {
				border-radius: 0.8vw;
				background-color: #fff;
				overflow: auto;
				margin-top: $mainPaddingVertical;
				height: calc(100vh - #{$headerHeight} - #{$buttonContainerHeight} - #{$mainPaddingVertical} - #{$mainPaddingVertical} - #{$mainPaddingVertical} - 0.1vw); //100vh - header - buttonList - 自己的上下margin - 容错
				box-shadow: rgba(0, 0, 0, 0.1) 0px 0.15vw 0.4vw;
				box-sizing: border-box;
				padding: 1.5vw;
			}
		}
	}
</style>